<template>
  <div class="app-container">
    
    <!-- :inline="true"表示行内表单 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <!-- v-model为什么绑定叫hosname和hoscode的属性，因为后端由@RequestBody修饰的实体类HospitalSetQueryVo正好就是这两个属性，名字必须和
        HospitalSetQueryVo的属性名保持一致，这样才能把前端传的数据绑定到HospitalSetQueryVo实体中 -->
        <el-input v-model="searchObj.cname" placeholder="竞赛名称"/>
      </el-form-item>
      
      <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
      
      
    </el-form>

    

    <!-- banner列表 -->
    <el-table :data="list" stripe style="width: 100%">
      <!-- <el-table-column type="index" width="50"/> -->
      <el-table-column prop="id" label="竞赛编号"/>
      <el-table-column prop="cname" label="竞赛名称"/>
      <el-table-column prop="year" label="年度" width="200"/>
      <el-table-column prop="news" label="竞赛新闻"/>
      <!-- 操作栏 -->
      <el-table-column label="操作" width="280" >
        <!-- slot-scope="scope"表示当前行所在的域 -->
        

         
        <template slot-scope="scope">
  
  
          &nbsp;
          <!-- 路由跳转(编辑按钮)当被点击后，内部会立刻把 to 的值传到 router.push() -->
          <router-link :to="'/student/comDetail/'+scope.row.id">
              <el-button type="primary" size="mini" icon="el-icon-edit">去报名</el-button>
          </router-link>
          &nbsp;

          </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <!--:current-page是当前页，改成current,前边有冒号，是v-bind，所以冒号里写js表达式  -->
    <!-- @current-change是element-ui的一个事件，切换分页的时候触发 -->
    <el-pagination
      :current-page="current"  
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="fetchData"
    />

  </div>
</template>

<script>
//前后端交互：在vue文件中导入hospitalset.js，这些js文件里写了和后端接口交互的函数，调用这些函数，就能实现前后端数据交互
//记住：前后端交互是靠写的js文件里的函数，而跟router/index.js里配的路由没一点关系，路由只负责前端点哪个按钮跳到哪个组件而已
import admin from '@/api/admin' 
import student from '@/api/student' 
export default {
    data() {
        return {
          current:1, //当前页
          limit:5,   //每页显示记录数
          searchObj:{},//条件封装对象
          list:[],//当前页的数据集合  
          total:0 //总记录数
        }
    },
    created(){
      //获取数据
      this.fetchData()
    },
    
    
    //带分页
    methods:{
      fetchData(current=1){//上边created钩子调fetchData函数如果没有传参数就默认current为1,若传了2，那就是this.curremt=2,1就没用了
        this.current=current;
        admin.getPageList(this.current,this.limit,this.searchObj).then(response=>{
          //Response：被axios响应拦截器处理后的结果，是Result对象,并不是原始的response，而是原始的response中的data，即Result对象
          //console.log(response);  
          // response.data是Result对象的data属性，这个data是后端自己定义的，它就是Page对象
          this.list=response.data.records;//records是IPage里的
          this.total=response.data.total;
          console.log(response)
          
        })
      },
      //学生报名参赛
      addCom(){
            student.addStuCom(this.com).then(response=>{
                //提示
                this.$message({
                    type:'success',
                    message:'报名成功'
                })
                
            }) 
        },
    }
}
</script>

<style>

</style>